Hot Metal Pro 4.0/Hot Metal Pro 4.0.iso/Special/text/css.txt

Text File | 1997-11-17 | 35.6 KB | 1,081 lines

9. Using cascading style sheets



Cascading style sheets are style sheets that can be
attached to individual HTML documents. Rather than having
the appearance of your documents determined by the Web
browser defaults, you can customize the way that users
view your document. Cascading style sheets provide the
most versatile control over document styles, but are
not widely supported by Web browsers. At the time of
this writing, Microsoft Internet Explorer (3.0 and above)
and Netscape Communicator 4.0 provide the most extensive
support for cascading style sheets.

You can use the HoTMetaL PRO cascading styles editor
to define your own cascading styles for displaying documents.


Style sheets must be linked to HTML documents  in order
to be applied to the document by the browser.

A cascading style sheet consists of one or more rules.
There are two different types of rules:

1. Rules associating an element, a group of elements,
a element in a particular context, or some combination
of these with a set of style properties and values.
This is the usual type of rule in a style sheet.

2. Rules used to set information about the style sheet
such as its title, author, etc., as well as specifying
imported style sheets and additions to the CSS standard.

The cascading part of the CSS standard refers to the
fact that multiple style sheets can be applied to one
document and influence how the document is displayed.
A document's style sheets can have several rules that
refer to the same element. There is a general scheme
of how rules are to be interpreted that allows more
specific rules to override more general ones, and rules
that are built in to a document to override rules that
are linked to a document.

The cascading style sheet standard

 The cascading style sheet standard is very flexible
and quite complicated: HoTMetaL PRO supports a subset
of this standard. The specifications for the evolving
cascading style sheet standard can be found at the W3C
Consortium's Web page at http://www.w3.org/. See the
Microsoft (http://www.microsoft.com/) and Netscape
(http://www.netscape.com/)home pages for information on
their support for the CSS standard.

9.1. Using the cascading style sheet editor

To use the HoTMetaL PRO cascading style sheet editor:


* Choose Cascading Style Sheets... from the Tools menu
of the HoTMetaL PRO Editor or HoTMetaL PRO Information
Manager.

If you launch the cascading style sheet editor from
the HoTMetaL PRO Editor, and the current document is
linked to a cascading style sheet file, the style sheet
editor will load that file. Otherwise, a dialog box
will appear, prompting you to choose a file.

* If a dialog box appears, choose an existing style
sheet (.css) file, or enter a new filename to create
a new file.

The style sheet editor has two modes, simple and advanced.
Each mode lets you set the same style properties, but
the advanced editor lets you specify more complex situations
in which these style properties can be applied.

* The simple editor is the default mode when the style
sheet editor is launched. If the upper right corner
of the dialog box contains the [More...] button, the
editor is in simple mode. In simple mode you can assign
style properties to elements, classes of elements, and
specific element instances.

* To put the editor in advanced mode, click on the [More...]
button in the upper right corner of the dialog box;
if the button reads [Less...], the editor is currently
in advanced mode. In advanced mode you can create context-sensitive
style properties and apply styles to groups of elements.

You should enter a title for the style sheet in the
Title text box.

Once you have finished creating your style sheet, click
on [Save] to save the styles you have created or modified,
or [Save As...] to save the style sheet under a different
name. Clicking on [Reset] discards all the changes you
have made; that is, the style editor will have the content
it had when the file was loaded. Click on [Exit] to
dismiss the CSS editor without saving any changes.

9.2. Attaching cascading styles to a document

There are three ways to attach cascading styles to a
document:

* Attach an external style sheet file using a LINK element.

* Embed a style sheet in the document using the STYLE
element.

* Assign an inline style rule for a specific occurrence
of an element, using the STYLE attribute.

9.2.1. Attaching an external style sheet to a document

If you want a cascading style sheet file to be applied
to a document, it must be linked to the document using
the HoTMetaL PRO Editor. This type of link is contained
in a LINK element.

* Display the Tags On view.

* If the HEAD element (at the top of the file) isn't
displayed:

1. Choose Options... from the Tools menu.

2. Click on the View tab.

3. Turn on Show head element.

4. Click on [OK].

* Put the insertion point directly after the [HEAD> start-tag
(that is, don't put it inside a `head' element such as TITLE).

* Choose Element... from the Insert menu, or click on
the {Insert Element} toolbar button.

* Insert a LINK element. The Insert Link dialog box
will come up automatically.

* Enter the URL for the cascading style sheet (.css)
file that you want to link to.

* Click on [OK].

* With the insertion point still inside the LINK element,
choose Attribute Inspector from the View menu, or type
[F6].

* Type `STYLESHEET' (all CAPS) in the REL field, and
type [Enter].

* Optionally, enter a title for the stylesheet in the
TITLE field, and type [Enter].

9.2.2. Embedding a style sheet in a document

You can embed a cascading style sheet directly inside
an HTML document using the STYLE element. The HoTMetaL
PRO cascading style sheet editor does not support this
method directly: you can create the style sheet as a
separate file and then manually paste it into your HTML
document.

* Display the Tags On view.

* If the HEAD element (at the top of the file) isn't
displayed:

1. Choose Options... from the Tools menu.

2. Click on the View tab.

3. Turn on Show head element.

4. Click on [OK].

* Put the insertion point directly after the [HEAD>
start-tag (that is, don't put it inside a `head' element
such as TITLE).

* Choose Element... from the Insert menu, or click on
the {Insert Element} toolbar button.

* Insert a STYLE element.

* Type or paste the cascading style sheet inside the
STYLE start- and end-tags.

* With the insertion point still inside the STYLE element,
choose Attribute Inspector from the View menu, or type
[F6].

* Type `text/css' in the TYPE field, and type [Enter].

Because some browsers that are not CSS-compliant will
display the contents of the STYLE element in the document
window, it is a good idea to surround an embedded style
sheet with an HTML comment. This will cause the content
to be ignored by non-CSS browsers, but still interpreted
by CSS compliant browsers.

* Type `<!--' just after the [STYLE>
start-tag, but before the style sheet information.

* Type `-->' just before the </STYLE]
end-tag, but after the style sheet information.

9.2.3. Creating an inline style rule for an element

You can specify an inline cascading style rule for an
individual instance of an element, using its STYLE element.
The HoTMetaL PRO cascading style sheet editor does not
support this method directly: you can create the style
rule using the editor and then manually paste it into
your HTML document.

* Put the insertion point inside the element to which
you want to assign a style.

* Choose Attribute Inspector from the View menu, or
type [F6].

* Type or paste the style rule in the STYLE field. You
should enter only the `properties' part of the rule
(that is, the part that appears inside the `{' and '}').
For example:

<PáSTYLE="font-size:12pt;ácolor:red">Text</P>

9.3. Setting a cascading style for an element

To assign cascading style properties to an element (that
is, all elements of a particular type, for example,
`all H1 elements'):

* Launch the cascading style sheet editor.

* The cascading style sheet editor should be in simple
mode: it is in simple mode if the button in the upper
right corner reads [More...]; if it reads [Less...],
click on the button to return to simple mode.

* Select an element from the Element pull-down element
list.

* Now you can use the tabbed `style properties' section
of the cascading style sheet editor to set the styles
for the selected element.

9.4. Classes and IDs

Classes provide a way of assigning a style to many element
instances, possibly of different types. IDs provide
a way of assigning a style to one specific occurrence
of an element.

Classes

A class is simply a group of elements, possibly scattered
throughout a document, all of which have the same value
for their CLASS attribute. For example, if you want
a document on some topic to contain both `basic' and
`advanced' sections, you could give all the elements
that contained advanced material the CLASS attribute
value `advanced'. The advanced sections could include
paragraphs, headings, images, links, and so forth. You
could then use a cascading style sheet to format the
`advanced' class differently: display it in a different
color, or even make it invisible.

IDs

While many elements can have the same CLASS attribute
value, only one element in any document can have a particular
ID attribute value. IDs are intended to be unique identifiers
for elements in a document: the HoTMetaL PRO Editor
will not validate a file in which the same ID value
is used for more than one element. Cascading style sheets
let you associate an ID attribute with a set of style
properties and values, so that you can format a particular
element instance in a certain way.

9.4.1. Creating classes and IDs

You create classes and IDs in a document in the HoTMetaL
PRO Editor.

To create a class, you set the CLASS attribute of as
many elements you wish to the same value.

* Put the insertion point inside an element that you
want to add to a class.

* Choose Attribute Inspector from the View menu, or
type [F6].

* Insert a value in the CLASS field and type [Enter].

* Repeat this for each element that you want to add
to the class, using the same value for CLASS each time.

To create an ID, you set the ID attribute of one element
to a unique value.

* Put the insertion point inside the element that you
want to assign an ID to.

* Choose Attribute Inspector from the Markup menu, or
type [F6].

* Insert a value in the ID field and type [Enter].

NOTE: Class and ID attribute values must start with
a letter and can contain only letters, numbers, and
`-' (hyphen).

9.4.2. Assigning styles to classes and IDs

To create a simple style rule associating a class or
ID with a set of styles:

* Click on the [Add Class/ID...] button in the cascading
style sheet editor.

 The Edit Simple Selector dialog box appears.

To specify a class:

*  Enter the CLASS attribute value in the Class text
box.

 The CLASS attribute will be displayed in the Element
list with an initial period (`.') to indicate that it
is a CLASS attribute rule and not an element rule.

To specify an ID:

* Enter an ID attribute value in the ID text box.

 The ID will be displayed in the Element list with an
initial number sign (`#') to indicate that it is an
ID attribute rule.

* Now you can use the tabbed style properties section
of the CSS Editor to set style properties  for the selected
class or ID.

NOTE: Class names and IDs that are to be used in style
sheets must start with a letter and can contain only
letters, numbers, and `-' (hyphen). Class names and
IDs are not case-sensitive in a cascading style sheet:
for example, classes called `H1b' and `h1B' are the
same. A CLASS or ID rule that has no style properties
associated with it will not be saved in the style sheet
file.

9.5. Setting style properties

The properties section of the CSS editor dialog box
(on the right, just below the Elements list) is tabbed:
set style properties by clicking on the tab and moving
to the appropriate section.

Click on the Font tab to edit font properties, the Text
tab to edit text properties, the Background tab to edit
background properties, or the Other tab for miscellaneous
properties. You can also hide parts of a document.

Many style properties have the default value inherit:
this means that the value for that property will be
inherited from the corresponding value (if any) for
its surrounding (enclosing) element, or from the default
value for that property in the browser. For example,
if the font-size property of the P element were set
to inherit, it would have the same font-size property
as a DIV or BODY, depending on which element contained
that P element.

NOTE: In properties where you must select a value and
a unit measurement, you cannot enter any numeric values
if the property is set to `inherit'. You have to choose
the unit of measurement first.

Style specifications are applied immediately, when you
change a property value. The changes can be seen in
the sample text area next to the properties section.
If you want to `reset' a style, do so manually; clicking
on the [Reset] button reloads the entire style sheet.

9.5.1. Font properties

Click on the Font tab of the cascading style sheet editor
to edit font properties in the cascading style sheet.


In this section, you can set the following properties:

* font-family - The fonts available on your system will
be listed in the primary pull-down list. You can either
choose a font from this list or type a font name (for
example, Times New Roman). You can also specify a font
class (such as serif). The default is inherit.

In addition to the primary font family specification,
you can specify secondary font or font class specifications,
which will be used if the browser viewing the file is
unable to find the specified primary font family. For
example, if you use the font Gill Sans as your primary
font family specification, but a user is viewing your
document on a PC that does not have the Gill Sans font,
you may want to use a secondary specification such as
sans-serif, so that even if the user is not viewing
the document with the exact font that you specified,
he or she is at least viewing it with a font of the
same type, that is, a sans-serif font.

Make your secondary font-family choices from the New
secondary pull-down list or enter them into the text
box. Then click on [Add...] to add the secondary font
families to the Secondary list. These choices are ranked
by order: that is, an item higher up in the Secondary
list will be used first, if it is available. You can
delete an entry from this list by clicking on an entry
and then clicking on the [Delete] button.

* font-size - Choose a unit of measurement from the
pull-down menu and enter a value for the font size.
The CSS standard allows inches, centimeters, pixels,
or points as units of measurement; points are usually
the most appropriate unit.

* line-height - Choose a unit of measurement from the
pull-down menu and enter a value for the space between
the baselines of lines of text. You can choose inches,
centimeters, pixels, or points, or specify a percentage
of the font size. For example, if the font size were
10 points, and the line-height value were set to 120%,
the space between lines would be 12 points (120% of
10 points).

* font-style - Choose inherit, normal, or italic from
the pull-down list.

* font-weight - The style sheet lets you set levels
of font weight, so you can, in effect, make text `more
bold' and `less bold'. Selecting normal uses the default
weight; selecting inherit uses the same font-weight
value as the containing element. Selecting lighter or
bolder decreases or increases the font weight, respectively.
You can also specify font weight on a numerical scale
where 100 is the lightest weight and 900 is the heaviest.

9.5.2. Text properties

Click on the Text tab of the cascading style sheet editor
to edit text properties in the cascading style sheet.


In this section, you can set the following properties:

* margin-top, margin-right, margin-left - Set the value
for the margin at the top, right, or left side of this
element. (This is really only useful for `block' elements
such as P.) You must first define the units for the
value you enter: choose one of centimeters, inches,
points or pixels from the pull-down list. If you enter
a negative value, this will move the margins outward
from their current setting.

* color - Specifies the color of the text. There are
three ways to specify font color:

* Choose a pre-defined color from the pull-down list
containing the standard 16 Windows colors.

* Choose RGB from the pull-down list and enter a color
in #RRGGBB format.

* Choose a custom color by clicking on the [Custom]
button: the Windows Color dialog appears.

* text-indent - Sets the indent for the first line of
the element. Enter a numeric value and choose the units
for the value you enter. (To indent the whole element,
set a value for the margin-left property.)

* text-align (justification) - You can choose from inherit,
left, center, and right.

* text-decoration - If no box is chosen, the specification
is `inherit'. You can choose underline, strikethrough,
or both. If none is chosen, any previous value for underline
or strikethrough is overridden.

9.5.3. Background properties

Click on the Background tab of the cascading style sheet
editor to edit background properties in the cascading
style sheet.

In this section, you can set the following properties:

* background-color - Sets the background color for the
specified selector group. There are three ways to specify
background color:

* Choose a predefined color from the pull-down list
containing the standard 16 Windows colors.

* Choose RGB from the pull-down list and enter a color
in #RRGGBB format.

* Choose a custom color by clicking on the [Custom]
button: the Windows Color dialog appears.

You can also use background-color to set a transparent
background: just choose transparent from the pull-down
list of colors.

* background-image - Enter the URL for an image file
that you wish to use as a background (generally, this
URL is given in relative format and specifies a file
in the current directory). You can also choose an image
by clicking on the [Browse...] button.

* background-repeat - Sets how the background image
will repeat or `tile'.

* repeat (the default): the background image will repeat
indefinitely in both directions

* repeat-x: the background will repeat horizontally
only

* repeat-y: the background image will repeat vertically
only

* no-repeat: the background image will not repeat; it
will only be seen once (useful for large images)

* background-attachment - Specifies whether the background
image will scroll along with the browser window when
the user scrolls, or whether it will remain fixed.

* background-horizontal, background-vertical - You can
specify the position of the background image by choosing
a value for either or both of these specifications.
background-horizontal can have the following values:

* left: positions the left edge of the background image
to the left side of the browser window

* center: positions the background image in the center

* right: positions the right edge of the background
image to the right side of the browser window

* percentage: you can specify the exact positioning
of a background image by entering a percentage. 0% is
the left edge of the browser window (and is equivalent
to left); similarly, 100% specifies the right edge.
43%, for example, would position a background image
just left of center.

* centimeters, inches, points, or pixels: specify an
exact positioning using any of these units. The background
image will be positioned the specified distance from
the left edge.



background-vertical can have the following values:

* top: positions the top edge of the background image
at the top of the browser window

* center: positions the background image in the center

* bottom: positions the bottom edge of the background
image at the bottom of the browser window

* percentage: you can specify the exact positioning
of a background image by entering a percentage. 0% is
the top edge of the browser window (and is equivalent
to top); similarly, 100% specifies the bottom edge.
75%, for example, would position a background image
near the bottom.

* centimeters, inches, points, or pixels: specify an
exact positioning using any of these units. The background
image will be positioned the specified distance from
the top edge.

9.5.4. Miscellaneous properties

Click on the Other tab in the cascading style sheet
editor to edit some miscellaneous properties.

This section of the cascading style sheet editor is
used to:

* Enter values for property types that are new extensions
to the CSS standard.

* Assign priorities to rules.

Extensions

The cascading style sheet standard is continually being
upgraded. Values for new property types can often be
entered using the Other section of the cascading style
sheet editor. In general, you can use Other to edit
a property if it can be expressed in the form:

propertyá:ávalue

For example:

font-foundryá:áGill'sáFontáFarm

* Click on the Other tab.

* Enter the property (for example, `font-foundry') in
the Other properties text box.

* Enter the value in the Value text box (for example,
`Gill's Font Farm').

* Click on the [Save...] button in this section of the
dialog box. You can delete these custom properties by
clicking on the [Delete] button.

If an extension can't be expressed in this form (that
is, it requires a different syntax), you may be able
to enter it using an `@? rule'.

Priorities

If certain elements are assigned styles in more than
one way (for example, in the document itself and by
means of an external style sheet), you can help to resolve
style conflicts by choosing priorities for important
styles.

* Click on the Other tab.

* Select a style property from the Property pull-down
list.

* Enter a specification in the Priority text box. Entering
important in this text box will make the style property
you have specified more rigid and less able to be influenced
by competing style specifications.

* Optionally, enter a comment in the Comments text box.

NOTE: `Priority' is currently not supported by any browser.

9.5.5. Showing and hiding parts of a document

A style sheet can hide all instances of an HTML element,
a single element instance, or all of the elements in
a class. In advanced mode, you can also create a more
complex rule and hide it in a style sheet. This allows
you to have subsections of documents visible or hidden
in different style sheets, managing your information
more effectively. If the same document will be read
by different audiences with somewhat different needs,
then instead of having to edit the content of your document
to create different versions, you can supply the different
audiences the same document, but with different style
sheets linked to it.

To set a `hidden' style:

* Choose an element, class, or ID from the Element list
in simple mode, or choose a rule from the Edit Style
Rules list in advanced mode.

* Click on the Hide Contents of Element check box.

The sample text will disappear from this dialog box,
indicating that the text is hidden.

NOTE: At the time of this writing, no browsers support
this feature.

9.6. Examples of simple styles

The following sample style sheet contains three style
rules that were created with the cascading style sheet
editor in simple mode:

1. The first rule states that all H1 elements will have
a font size of 20 points, line height of 22 points,
and be displayed in green.

2. The second rule states that all elements in the class
`student' (that is, all elements, of any type, whose
CLASS attribute has the value `student') will be hidden.

3. The third rule states that the element with ID value
`para1' will be displayed in a bold, italic font.



H1á{áfont-size:á20pt;áline-height:á22pt;ácolor:ágreená}
.studentá{ádisplay:ánoneá}
#para1á{áfont-style:áitalic;áfont-weight:áboldá}


9.7. Cascading styles: Advanced mode

Use the advanced mode of the cascading style sheet editor
to:

* Create rules that group together several element types,
elements in a particular context, classes, and  IDs.

* Assign style properties to these rules.

* Create rules that import other style sheets, rules
that specify meta-information about the style sheet,
and rules that extend the capabilities of the CSS standard.

* Re-order rules with respect to oneanother.



To use advanced mode, click on the [More...] button
in the upper right corner of the cascading style sheet
editor dialog box. The dialog box expands into the advanced
cascading style sheet editor.

Once you have defined a selector group (the first part
of a style rule), you must set a style property before
creating or editing another rule, or your selector group
and rule will not be saved to the style sheet file.

9.7.1. Creating and editing advanced rules

In simple mode you can create rules that assign style
properties to a single element, a class, or an ID.

In advanced mode you can create rules that assign style
properties to a group of several selectors. `Selector'
is a general term that refers both to simple items such
as elements, and complex items such as an element in
a specific context.

All of the defined rules are displayed in the Edit Style
Rules list: that is, all of the selectors in that rule
are displayed. This list also includes any rules that
you created in simple mode.

To create a new rule (that is, assign selectors to the
rule):

* Click on the [New...] button.

To modify an existing rule (that is, add or delete selectors):

* Select a rule in the the Edit Style Rules list.

* Click on [Edit...].

 When you click on [New...] or [Edit...] the Edit Selectors
in Rule dialog box appears.

From this dialog box you can add the following selectors
to the rule:

* An element.

* A class or ID.

* An element in a specific context.

* An element in a specific class.

After you create a rule, you must specify style properties
for it, or else it won't be saved when you save the
style sheet.

To make a copy of an existing rule:

* Click on a rule in the the Edit Style Rules list.

* Click on [Copy...].

A copy of the rule is added to the Edit Style Rules
list. The copy will, by default, have all of the style
properties of the original.

To delete a rule:

* Click on the rule in the the Edit Style Rules list.

* Click on [Delete].

9.7.2. Adding an element to a rule

To add an element to a rule:

* Make sure the cascading style sheet editor is in advanced
mode (click on the [More...] button if it's showing).

* Click on [New...] to create a new rule, or select
an existing rule from the Edit Style Rules list and
click on [Edit...].

* In the Edit Selectors in Rule dialog box that appears,
select an element from the Elements list.

* Move it into the Selectors in Rule list by clicking
on [Add >>].

9.7.3. Adding a class or ID to a rule

To add a class or ID to a rule:

* Make sure the cascading style sheet editor is in advanced
mode (click on the [More...] button if it's showing).

* Click on [New...] to create a new rule, or select
an existing rule from the Edit Style Rules list and
click on [Edit...].

* In the Edit Selectors in Rule dialog box that appears,
click on --Class/ID-- in the Elements list.

* Move it into the Selectors in Rule list by clicking
on [Add >>].

* Click on [Edit...].

* In the Edit Simple Selector dialog box that appears,
enter the Class or ID that you want to add.

* Click on [OK].

9.7.4. Adding an element in a class to a rule

You can add an element that's in a particular class
to a rule--the style properties specified for this rule
will apply to the element only when it has a particular
CLASS attribute value.

* Make sure the cascading style sheet editor is in advanced
mode (click on the [More...] button if it's showing).

* Click on [New...] to create a new rule, or select
an existing rule from the Edit Style Rules list and
click on [Edit...].

* In the Edit Selectors in Rule dialog box that appears,
select an element from the Elements list.

* Move it into the Selectors in Rule list by clicking
on [Add >>].

* Click on [Edit...].

* In the Edit Simple Selector dialog box that appears,
enter the desired Class.

* Click on [OK].

9.7.4.1. Pseudo-classes

Another way to refine the element that you are building
a style rule for is to enter a pseudo-class or pseudo-element.
Pseudo-classes are not attributes, but they are characteristics
of certain elements that are recognized by programs
that understand the CSS standard. Currently, there are
three defined pseudo-classes that work with A elements,
and can be selected from the pull-down list beside the
Pseudo-class text box. They are active, link, and visited,
and could be used to define different styles for the
A element in its unvisited, visited, and active state;
for example, different colors are generally used to
differentiate these different link states. Defined pseudo-classes
show up in the Style rules list or Edit Selectors in
Group dialog box with a colon separating the element
and the pseudo-class; for example, A:active.

Pseudo-elements are used to address sub-parts of elements.
For example, a pseudo-element that defines just the
first letter of a paragraph has been proposed (to be
used for formatting drop capitals, for example), as
P:first-letter. Pseudo-elements are not currently implemented
by Microsoft Internet Explorer or Netscape Navigator,
but as the CSS standard evolves, more pseudo-elements
will be understood by CSS-compliant programs; as this
occurs, you can enter the names of newly defined pseudo-elements
in the text box provided.

9.7.5. Adding an `element in context' to a rule

Sometimes you will want a style rule to apply to an
element only when it has a particular ancestor (or ancestors).
For example, you might want P within DIV to have a different
style than just plain P. This kind of selector is called
a contextual selector.

* Make sure the cascading style sheet editor is in advanced
mode (click on the [More...] button if it's showing).

* Click on [New...] to create a new rule, or select
an existing rule from the Edit Style Rules list and
click on [Edit...].

* In the Edit Selectors in Rule dialog box that appears,
select the element whose context you wish to specify
in the Elements list.

* Move it into the Selectors in Rule list by clicking
on the [Add >>].

* Click on [Edit Context...].

The Edit Contextual Selector dialog box appears.

 To specify that an element should be the ancestor of
the current element (in order for the styles to apply):

* Select the desired `ancestor' element from the Elements
list on the left.

* Click on [Add Before>>].

 On the other hand, you can specify that an element
should be the descendant of the current element:

* Select the desired `descendant' element from the Elements
list on the left.

* Click on [Add After>>].

You can add as many elements as are needed to this sequence
of ancestors and descendants:

* Select an element in each of the two lists.

Now:

* Click on [Add Before>>] to make the element in the
Elements list the ancestor of the element in the Contextual
Selector list.

Or:

* Click on [Add After>>] to make the element in the
Elements list the descendant of the element in the Contextual
Selector list.

If desired, you can further refine any element in the
Contextual Selector list by clicking on [Edit...] and
specifying a class.

9.7.6. Examples of advanced styles

The following sample style sheet contains three style
rules that were created with the cascading style sheet
editor in advanced mode.

1. The first rule states that both H5 and H6 elements
will have a font size of 14 and a line height of 16.

2. The second rule states that a P element that is contained
in a DIV element will be indented by 0.5 inches.

3. The third rule states that a DD element in the class
`student' (that is, its CLASS attribute has the value
`student') will be hidden.

H5,áH6á{áfont-size:á14pt;áline-height:á16ptá}
DIVáPá{átext-indent:á0.5iná}
DD.studentá{ádisplay:ánoneá}

9.7.7. Rule ordering

You can change the order of the rules in the advanced
mode by selecting a rule and then clicking on the `up'
or `down' arrow to move it higher or lower in the list.
This ordering may affect how elements are displayed
in the browser. See the cascading style sheet standard
for detailed discussions of rule ordering and its impact
on CSS-compliant viewer software.

9.7.8. Importing another style sheet

You can import another style sheet and all its rules
and elements into the current style sheet. This can
be quite useful in many ways; for example, if you have
made a `reference' style sheet for the basic styles
of your project, and would like to modify only a few
selected styles.

* Make sure the cascading style sheet editor is in advanced
mode (click on the [Less...] button if it's showing).

* Create a new style rule by clicking on [New...].

* Click on the @import radio button in the Edit Selectors
in Rule dialog box. The Edit @import dialog appears.

* Enter the URL for the imported style sheet in the
URL text box, or click on [Browse...] to select it.

* Optionally, enter comments about this imported style
sheet in the Comments text box provided.

9.7.9. Adding meta-information

A SoftQuad extension to cascading style sheets lets
you enter information for keeping track of style sheets,
versions of style sheets, etc. These `rules' are informational
only and don't affect how the browser displays documents.

 To enter meta-information:

* Make sure the cascading style sheet editor is in advanced
mode (click on the [Less...] button if it's showing).

* Create a new style rule by clicking on [New...].

* Click on the @meta radio button in the Edit Selectors
in Rule dialog box. The Edit @meta dialog appears.

* Enter the name of a particular kind of information
you want to enter in the Name text box, or select one
from the pull-down list.

* Enter the value for that piece of information in the
Value text box.

* Optionally, enter a comment in the Comments text box.

* Optionally, enter comments on the entire `@meta rule'
in the General comments text box.

9.7.10. Extensions to the cascading style sheet standard

The cascading style sheet standard is continually being
upgraded. Values for new property types can often be
entered using the Other section  of the cascading style
sheet editor. In general, you can use Other to edit
a property if it can be expressed in the form:

propertyá:ávalue

For example:

font-foundryá:áGill'sáFontáFarm

If an extension can't be expressed in this form (that
is, it requires a different syntax), you may be able
to enter it using an `@? rule':

* Make sure the cascading style sheet editor is in advanced
mode (click on the [More...] button if it's showing).

* Create a new style rule by clicking on [New...].

* Click on the @rule radio button in the Edit Selectors
in Rule dialog box. The Edit @? dialog appears.

* This dialog box contains a plain text box where text
of any kind can be added. Enter the new rule in this
text box. The text you enter will be written into the
style sheet exactly as you typed it.